<template>
  <div class="register">
    <p><input type="text" v-model="usr.phoneNumber" maxlength="11" placeholder="请输入手机号码"></p>
    <p><input type="text" v-model="usr.validCode" maxlength="6" placeholder="请输入短信验证码"></p>
    <p><input type="password" v-model="usr.password" maxlength="12" placeholder="请输入6-12位密码"></p>
    <div class="yarn">
      <input v-model="sure" class="bingo" type="checkbox">
      <span style="color: #555;margin-left: 2vw;">我已经阅读并同意</span>
      <span style="color: dodgerblue">《商城销售合同》</span>
    </div>
    <button @click="check" class="sk">注册</button>
    <p class="code" @click="getValidCode">获取验证码</p>
  </div>
</template>
<script>
import $ from 'jquery';

export default {
  name: 'register',
  data() {
    return {
      isshow: null,
      usr: {
        phoneNumber: '',
        check: '',
        password: '',
        validCode: '',
      },
      sure: '',
    };
  },
  methods: {
    getValidCode() {
      const telReg = /1[35789]\d{9}$/;
      if (telReg.test(this.usr.phoneNumber)) {
        this.$http.validCode(this.usr.phoneNumber)
          .then((res) => {
            this.usr.validCode = res.data.data;
            // if (res.data.data.code = 1001) {
            //   this.$message({
            //     message: '操作过于频繁,休息一会儿~',
            //     timout: 400,
            //     type: 'warning',
            //   });
            // }
            // if (res.data.data.code = 1002) {
            //   this.$message({
            //     message: '验证码发送成功,注意查收!',
            //     timout: 300,
            //     type: 'success',
            //   });
            // }
            // if (res.data.data.code = 1003) {
            //   this.$message({
            //     message: '参数不合法!',
            //     timout: 400,
            //     type: 'error',
            //   });
            // }
          });
        this.$message({
          type: 'success',
          message: '获取验证码成功',
          duration: 2000,
          center: true,
        });
      }
    },
    check() {

    },
  },
  updated() {
    const telReg = /^1[35789]\d{9}$/;
    const $dom = $('.sk');
    if (telReg.test(this.usr.phoneNumber) && this.usr.validCode.length >= 6 &&
      this.usr.password >= 6 && this.sure === true) {
      $dom.css({ background: 'dodgerblue' });
    } else {
      $dom.css({ background: '#555' });
    }
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;}
  .register{
    margin-top: 50px;
    width: 100vw;
    position: absolute;
  }
  .register input{
      display: inline-block;
      text-indent: 58px;
      height: 164px;
      width: 100%;
      line-height: 164px;
      border: none;
      outline: none;
      font-size: 40px;
      font-family: "黑体";
      box-sizing: border-box;
  }
  .yarn{
    margin-top: 30px;
    font-size: 0;
  }
  .yarn span{
    display: inline-block;
    font-size: 40px;
    cursor:pointer;
  }
  .yarn .bingo{
    width: 40px;
    height: 40px;
    background: url("./img/success.png") no-repeat;
    background-size: 100%;
    vertical-align: -8px;
    margin-left: 3vw;
    /*display: none;*/
  }
  .yarn .bingo::after{
    width: 15px;
    height: 15px;
    background: url("./img/success.png") no-repeat;
    background-size: 100%;
    vertical-align: -2px;
    margin-left: 3vw;
  }
  .yarn .bingos{
    width: 15px;
    height: 15px;
    background: url("./img/success2.png") no-repeat;
    background-size: 100%;
    vertical-align: -2px;
    margin-left: 3vw;
  }
  .register button{
    border: none;
    width: 70vw;
    line-height: 100px;
    display: block;
    margin: 150px auto;
    color: #fff;
    letter-spacing: 3px;
    border-radius: 50px;
    outline: none;
    font-size: 50px;
    background-color: #555;
  }
  .code {
    position: absolute;
    left: 80vw;
    top: 17.5vw;
    font-size: 33px;
    color: dodgerblue;
    cursor: pointer;
  }
</style>
